<template>
  <view class="content">
    <view class="index_hd">
      <!-- 导航栏 -->
      <view class="navigation">
        <image
          style="height: 25px; width: 90px; position: absolute; left: 0"
          src="../../static/image/logo.png"
          mode=""
        ></image>
        <view class="navigation_title"> 外卖 </view>
      </view>
      <!-- 搜索区域 -->
      <view class="search" @tap="toSearch()">
        <!-- <image src="../../static/image/index/Vector.svg" mode=""></image> -->
        <!-- <input
          type="text"
          v-model="query.name"
          placeholder="搜索店铺名称"
          placeholder-class="placeholder"
        /> -->
        <uv-search
          placeholder="搜索店铺名称"
          v-model="query.name"
          bgColor="rgba(255, 255, 255, 0.84)"
          @search="searchHandle"
          @custom="searchHandle"
          :actionStyle="{ color: '#fff' }"
        ></uv-search>
      </view>
      <view class="index_position">
        <!-- 四川省文化产业技术学院 -->
        <image
          class="index_position_img"
          src="../../static/image/position.png"
          mode=""
        ></image>
      </view>
    </view>
    <!-- 主体区域 -->
    <view class="index_con">
      <view class="index_message" style="font-size: 23rpx; height: 71rpx">
        {{ message }}
      </view>

      <view class="swiper">
        <swiper
          circular
          :indicator-dots="false"
          :autoplay="true"
          :interval="20000"
          :duration="500"
        >
          <swiper-item
            v-for="(item, index) in bannerList"
            :key="index"
            @tap="swiperHandle(item)"
          >
            <image
              class="swiper-image"
              :src="domain + item.img"
              mode="aspectFit"
            ></image>
          </swiper-item>
        </swiper>
      </view>

      <!-- 分类 -->
      <view class="index_types">
        <view
          class="index_type"
          v-for="(item, index) in businessCategory"
          :key="index"
          @tap="selectBusinessCategory(item)"
        >
          <image :src="domain + item.img" mode=""></image>
          <text>{{ item.name }}</text>
        </view>
      </view>

      <!-- 平台公告 -->
      <!-- <view class="platform_notice">
				<view class="notice_title">
					平台<text>公告</text>
				</view>
				|
				<view class="notice_content">
					这里是公告信息以及他显示的内容
				</view>
				<view class="notice_more">
					<uni-icons type="forward" size="16"></uni-icons>
				</view>
			</view>
			 -->
      <!-- 广告 -->
      <!-- 	<view class="adv">
				<image v-for="(item,index) in bannerList" :key="index" :src="domain + item.img" mode=""></image>
			</view> -->

      <!-- 商铺 -->
      <view class="stores">
        <view
          class="store"
          v-for="(item, index) in stores"
          :key="index"
          @tap="toShopDetail(item)"
        >
          <view class="store_img">
            <image
              v-if="item.businessImg"
              :src="domain + item.businessImg"
              mode="aspectFill"
            ></image>
            <image v-else mode="aspectFill"></image>
          </view>
          <view class="store_info">
            <view class="store_info_title">
              {{ item.name }}
            </view>
            <view class="store_info_bd">
              <!-- <view class="store_info_score">
								{{item.score}}分
							</view> -->
              <view class="store_info_sale">
                月售{{ item.orderCurrentMonthTotal }}
              </view>
            </view>
            <view class="store_info_bt">
              <view class="store_info_price">
                {{ item.address }}
              </view>
              <!-- <view class="store_info_deliveryPrice">
								配送{{item.deliveryPrice}}
							</view> -->
            </view>
            <!-- <view class="store_info_distance">
							{{item.address}}
						</view> -->
          </view>
        </view>
      </view>
      <uni-load-more :status="loadStatus"></uni-load-more>
    </view>
    <view class="mask" v-show="showModel == true" @tap="closeMask()"></view>
    <view class="cancel_mask" v-show="showModel == true">
      <view
        style="
          position: relative;
          top: 259rpx;
          left: 52rpx;
          display: inline-block;
        "
      >
        {{ reductionTotal }}元优惠券
      </view>
      <image
        src="../../static/image/item.png"
        mode="aspectFit"
        @tap="addObtain()"
      ></image>
    </view>
    <tabBar current="1"></tabBar>
  </view>
</template>

<script>
import server_url from "../../api/config.js";
import {
  login,
  getList,
  getBusinessCategory,
  getBanner,
  getMessage,
  getReductionList,
  getObtain,
} from "../../api/api.js";
export default {
  data() {
    return {
      loadStatus: "nomore",
      pageCount: 1,
      query: {
        pageNum: 1,
        pageSize: 10,
        name: "",
        businessCategoryId: "",
      },
      types: [],
      stores: [],
      domain: server_url,
      businessCategory: [],
      bannerList: [],
      message: "",
      showModel: false,
      reductionList: [],
      reductionTotal: 0,
    };
  },
  onPullDownRefresh() {
    this.query.pageNum = 1;
    this.dataList();
  },
  //上拉加载更多
  onReachBottom() {
    if (this.query.pageNum < this.pageCount) {
      this.query.pageNum++;
      this.dataList();
    }
  },
  onShow() {
    this.dataList();
  },
  onLoad() {
    this.queryReductionList();
    this.queryMessage();
    this.queryBanner();
    this.queryBusinessCategory();
    // uni.login({
    //   success(res) {
    //     login({ code: res.code }).then((dd) => {
    //       uni.setStorageSync("token", dd.data);
    //     });
    //   },
    // });
  },
  methods: {
    searchHandle() {
      console.log(111);
      this.query.pageNum = 1;
      this.dataList();
    },
    swiperHandle(item) {
      if (item.id == 1)
        uni.navigateToMiniProgram({
          appId: "wxd947200f82267e58",
          path: "pages/wjxqList/wjxqList?activityId=w9w2RPb",
          success(res) {
            console.log(res);
          },
        });
    },
    addObtain() {
      getObtain(this.reductionList).then((res) => {
        this.showModel = false;
      });
    },
    queryReductionList() {
      getReductionList().then((res) => {
        if (res.data.length == 0) {
          this.showModel = false;
        } else {
          this.reductionList = res.data;
          for (var i = 0; i < res.data.length; i++) {
            this.reductionTotal = this.reductionTotal + res.data[i].amount;
          }
          this.showModel = true;
        }
      });
    },
    closeMask() {
      this.showModel = false;
    },
    queryMessage() {
      getMessage().then((res) => {
        this.message = res.msg;
      });
    },
    queryBanner() {
      getBanner().then((res) => {
        this.bannerList = res.data;
      });
    },
    queryBusinessCategory() {
      getBusinessCategory().then((res) => {
        this.businessCategory = res.data;
      });
    },
    onChange() {
      this.query.pageNum = 1;
      this.dataList();
    },
    dataList() {
      uni.showLoading();
      getList(this.query).then((res) => {
        this.dataHandle(res);
        uni.hideLoading();
      });
    },
    dataHandle(res) {
      if (this.query.pageNum == 1) {
        this.stores = [];
      }
      this.stores.push(...res.rows);
      this.pageCount = Math.ceil(res.total / 10);
      if (this.query.pageNum >= this.pageCount) {
        this.loadStatus = "nomore";
      } else {
        this.loadStatus = "more";
      }
      uni.stopPullDownRefresh();
    },
    toSearch() {
      // uni.navigateTo({
      // 	url: '/pages/search/search'
      // })
    },
    // toShopList(item) {
    // 	uni.navigateTo({
    // 		url: '/pages/shop/shop'
    // 	})
    // },
    toShopDetail(item) {
      if (item.status == 2) {
        uni.showToast({
          title: "这个商家已打烊,吃点别的吧",
          duration: 2000,
          icon: "none",
        });
        return;
      }
      uni.navigateTo({
        url: "/pages/shop/detail?id=" + item.id,
      });
    },
    selectBusinessCategory(item) {
      this.query.businessCategoryId = item.id;
      this.dataList();
    },
  },
};
</script>

<style lang="scss">
@keyframes scroll {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.mask {
  position: fixed;
  z-index: 5;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.cancel_mask {
  position: fixed;
  z-index: 5;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  // width: 610rpx;
  // height: 300rpx;
  // background-color: #fff;
  // padding-top: 80rpx;
  border-radius: 12rpx;

  .delete_title {
    text-align: center;
    color: #2e343a;
    font-size: 32rpx;
    font-weight: 500;
  }

  .delete_btns {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 96rpx;
    border-top: 1rpx solid #ccc;
    display: flex;

    .delete_cancel {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50%;
      height: 96rpx;
      color: #2e343a;
      border-right: 1rpx solid #ccc;
    }

    .delete_sure {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50%;
      height: 96rpx;
      color: #2588ff;
    }
  }
}
.index_hd {
  // width: 100%;
  height: 400rpx;
  padding: 70rpx 32rpx 0;
  background: linear-gradient(
    180deg,
    rgba(255, 141, 26, 1) 12.5%,
    rgba(255, 195, 0, 1) 100%
  );

  .navigation {
    position: relative;
    text-align: center;
    color: #fff;
    font-size: 36rpx;
    font-weight: 500;
  }

  .search {
    display: flex;
    align-items: center;
    // width: 100%;
    height: 80rpx;
    border-radius: 80rpx;
    padding: 0 24rpx;
    margin-top: 20rpx;
    // background: rgba(255, 255, 255, 0.84);
    image {
      width: 28rpx;
      height: 30rpx;
    }

    input {
      margin-left: 16rpx;
      font-size: 26rpx;
      color: #333;
      background: transparent !important;
      &.placeholder {
        color: #9098a0;
      }
    }
  }

  .index_position {
    margin-top: 20px;
    height: 69rpx;

    .index_position_img {
      width: 60%;
      height: 60%;
    }
  }
}

.index_con {
  padding: 40rpx 32rpx 180rpx;
  border-radius: 32rpx 32rpx 0 0;
  background-color: #fff;
  margin-top: -140rpx;

  .index_message {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    // box-sizing: border-box;
    // padding-left: 100%; /* 初始隐藏文本 */
    animation: scroll 10s linear infinite; /* 应用滚动动画 */
    // border: 1px solid #ccc; /* 可选：添加边框 */
    // padding: 10px; /* 可选：添加内边距 */
  }

  .swiper {
    width: 100%;
    height: 293rpx;
    overflow: hidden;
    margin-top: -35rpx;
    margin-bottom: 20rpx;

    .swiper-image {
      width: 100%;
      height: 100%;
    }
  }

  .index_types {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;

    .index_type {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 20%;
      margin-bottom: 30rpx;

      image {
        width: 96rpx;
        height: 96rpx;
        margin-bottom: 16rpx;
      }

      text {
        font-size: 24rpx;
        color: #2e343a;
      }
    }
  }

  .platform_notice {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 24rpx;
    height: 82rpx;
    border-radius: 12rpx;
    padding: 0 24rpx;
    background-color: #f8f8f8;
    color: #666;

    .notice_title {
      font-size: 28rpx;
      font-weight: 700;
      margin-right: 15rpx;
      flex-shrink: 0;
      color: #000000;

      text {
        color: #2588ff;
      }
    }

    .notice_content {
      margin-left: 20rpx;
      font-size: 24rpx;
      color: #2e343a;
    }

    .notice_more {
      position: absolute;
      right: 24rpx;
    }
  }

  .adv {
    height: 182rpx;
    margin-top: 26rpx;

    image {
      border-radius: 12rpx;
      width: 100%;
      height: 100%;
    }
  }

  .stores {
    margin-top: 26rpx;

    .store {
      position: relative;
      display: flex;
      margin-bottom: 20rpx;

      .store_img {
        width: 130rpx;
        height: 130rpx;

        image {
          width: 100%;
          height: 100%;
          border-radius: 15rpx;
        }
      }

      .store_info {
        margin-left: 24rpx;

        .store_info_title {
          font-size: 28rpx;
          font-weight: 700;
          color: #333;
        }

        .store_info_bd {
          display: flex;
          align-items: center;
          margin-top: 6rpx;

          .store_info_score {
            color: #2588ff;
            font-size: 28rpx;
            margin-right: 10rpx;
          }

          .store_info_sale {
            color: #9098a0;
            font-size: 28rpx;
          }
        }

        .store_info_bt {
          display: flex;
          align-items: center;
          margin-top: 6rpx;

          .store_info_price {
            color: #9098a0;
            font-size: 24rpx;
            margin-right: 10rpx;
          }

          .store_info_deliveryPrice {
            color: #9098a0;
            font-size: 24rpx;
          }
        }

        .store_info_distance {
          position: absolute;
          bottom: 0;
          right: 24rpx;
          color: #9098a0;
          font-size: 24rpx;
        }
      }
    }
  }
}
</style>
